import React, {useCallback, useState} from 'react';
import {Col, Form, Icon, Input, Modal, Row, Select} from 'antd';
import {SourceProperty} from "@/pages/Analysis/Datasource/types";

const FormItem = Form.Item
const TextArea = Input.TextArea
const Option = Select.Option
 require('@/assets/less/util.less')

interface AddModelProps {
  visible: boolean;
  sourceId: any;
  onCancel: () => void;
}

const commonFormItemStyle = {
  labelCol: {span: 6},
  wrapperCol: {span: 16}
}

const longFormItemStyle = {
  labelCol: {span: 3},
  wrapperCol: {span: 20}
}
const AddModel: React.FC<AddModelProps> = (props) => {
  const {visible, onCancel, sourceId} = props;
  const [form] = Form.useForm();
  const [sourceProperties, setSourceProperties] = useState<SourceProperty[]>([])
  const onFinish = (values: any) => {
    console.log(values);
  };

  const reset = useCallback(
    () => {
      form.resetFields()
      setSourceProperties([])
    },
    [form]
  )
  return (
    <Modal
      title={`${!sourceId ? '新增' : '修改'} Source`}
      width="60%"
      maskClosable={false}
      visible={visible}
      onCancel={onCancel}
      afterClose={reset}
    >
      <Form form={form} name="control-hooks" onFinish={onFinish}>
        <Row>
          <Col span={12}>
            <FormItem label="名称" {...commonFormItemStyle}
                      rules={[
                        {
                          required: true,
                          message: '名称不能为空'
                        },
                        // {
                        //   validator: checkNameUnique
                        // }
                      ]}
                      hasFeedback>
              <Input autoComplete="off" placeholder="Name"/>
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <FormItem label="类型" {...commonFormItemStyle}>
              <Select>
                <Option value="jdbc">JDBC</Option>
                <Option value="csv">CSV文件</Option>
              </Select>
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem label="数据库" {...commonFormItemStyle}>
              {/* <Cascader*/}
              {/*  options={cascaderOptions}*/}
              {/*  displayRender={datasourceInfoDisplayRender}*/}
              {/*  onChange={datasourceInfoChange}*/}
              {/*/>*/}
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem label="用户名" {...commonFormItemStyle}>
              <Input autoComplete="off" placeholder="User"/>
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem label="密码" {...commonFormItemStyle}>
              <Input
                autoComplete="off"
                placeholder="Password"
                type="password"
              />
            </FormItem>
          </Col>
        </Row>
        <FormItem label="连接Url" rules={[
          {
            required: true,
            message: 'Url 不能为空'
          }
        ]} {...longFormItemStyle}>

          <Input
            placeholder="Connection Url"
            autoComplete="off"
            addonAfter={
              // testLoading
              false ? (
                <Icon type="loading"/>
              ) : (
                <span
                  // onClick={testSourceConnection}
                  style={{cursor: 'pointer'}}
                >
                    点击测试
                  </span>
              )
            }
          />
        </FormItem>
        <FormItem label="描述" {...longFormItemStyle}>
          <TextArea
            placeholder="Description"
            autosize={{minRows: 2, maxRows: 6}}
          />
        </FormItem>
      </Form>

    </Modal>
    // <Modal
    //   title="新增数据源"
    //   visible={visible}
    //   onCancel={() => {
    //     onCancel();
    //   }}
    // >
    //   <Form form={form} name="control-hooks" onFinish={onFinish}>
    //     <Form.Item name="name" label="名称：" rules={[{ required: true }]}>
    //       <Input />
    //     </Form.Item>
    //     <Form.Item name="type" label="类型：" rules={[{ required: true }]}>
    //       <Select>
    //         <Select.Option value="demo">Demo</Select.Option>
    //       </Select>
    //     </Form.Item>
    //     <Form.Item name="data" label="数据库：" rules={[{ required: true }]}>
    //       <Select>
    //         <Select.Option value="demo">Demo</Select.Option>
    //       </Select>
    //     </Form.Item>
    //     <Form.Item name="url" label="URL：" rules={[{ required: true }]}>
    //       <Input />
    //     </Form.Item>
    //     <Form.Item name="user" label="用户名：" rules={[{ required: true }]}>
    //       <Input />
    //     </Form.Item>
    //     <Form.Item name="pas" label="密码：" rules={[{ required: true }]}>
    //       <Input.Password />
    //     </Form.Item>
    //     <Form.Item name="text" label="描述：" rules={[{ required: true }]}>
    //       <Input.TextArea />
    //     </Form.Item>
    //   </Form>
    // </Modal>
  );
};
export default AddModel
